<template>
  <div>
    <!-- <h1 @click='fn'>{{name}}</h1>
    <input
      type="text"
      v-model.lazy='name'
      @keydown.enter="fn2"
    >
    <div v-html='str'></div>
    <div v-text='str'></div>
    <ul
      :class='{active:name.length > 3}'
      :class2="name.length > 3 ? 'active2' :''"
      :style="styObj"
      :qqq='styObj'
    >
      <template v-for='(item,index) in ary'>
        <li
          v-if='item<300'
          @click="fn3($event,item)"
          :key=''
        >
          {{index}}---{{item}}
        </li>
      </template>
    </ul>

    <h3 v-if='name.length <6'>{{name}}</h3>

    <h4 v-color='"red"'>自定义指令</h4>

    <button v-permission='[1,3]'>111</button>
    <button v-permission='[1,1]'>222</button>
    <button v-permission='[1,2]'>333</button> -->

    <input
      type="text"
      v-model='todo'
      @keydown.13="add"
    >
    <ul>
      <li
        v-for='(item,index) in todoList'
        :key='index'
      >
        <input type="checkbox">{{item}}
        <button @click='del(item)'>X</button>
      </li>
    </ul>
  </div>
</template>
<script>
// @ is an alias to /src
/* 
  指令 v-xx的行内属性
  v-model 一般用在表单元素上或者组件上 v-model是value属性和input事件的结合体
    v-model.number 使用的parseFloat转数字
    v-model.trim 去除首尾空格
    v-model.lazy  使用change代替input事件
  v-html  相当于原生的 innerHTML
  v-text 相当于原生的innerText

  v-cloak 仅适用于html文件写vue语法；解决vue小胡子语法的显示问题；工程化中用不到 
  v-pre 告诉vue当前标签不需要vue去解析l 可以节省vue编译的性能

  v-for 循环标签(或者组件)的一个指令  可以循环 数组 数字 字符串 对象
    使用时一般要配合key属性使用
  v-if  判断一个标签(或者组件)是否加载(有较大的切换开销)
    v-else-if  v-else
  v-show  判断一个标签(或者组件)是否显示(有较大的初始加载开销)
    v-if v-show的区别？ v-if控制的是加不加载；v-show控制的是display
    v-for 和 v-if 不建议同时使用；浪费性能(根源在于v-for的优先级高于v-if)
      vue2.0的v-for优先级高
      vue3.0的v-if优先级高

  v-bind 这个指令是专门用来处理行内属性的  简写:
        class  style    
        
  v-on  专门用来绑定事件的一个指令   简写@     
    @click.stop
    @click.prevent
    @click='fn'  fn执行时 会有一个默认参数e
    @click='fn(666)'  fn执行时 只有一个参数就是666
    @click='fn(666,$event)' fn执行时 第一个参数就是666 第二就是e
    @keydown.13  敲回车触发

  
  Vue会把我们的结构编译成虚拟DOM(就是个原生对象(实例))使用原生对象去模拟真实DOM树
    　　key属性可以提升虚拟DOM 的 diff算法
        key属性的标准值应该是那条数据的一个唯一值
        index 作为key的确定
*/
export default {
  data() {
    // 这里存储时组件自己的数据
    // 组件中的data为什么必须是一个函数？ 保证数据的独立性
    return {
      // 这个对象中的属性 最终都会被挂在到当前实例上
      name: "珠峰",
      str: "<h2>hello</h2>",
      ary: [111, 222, 333, 444],
      className: "box",
      styObj: { color: "red" },
      todo: "",
      todoList: [],
    };
  },
  // directives: {
  //   color(el, obj) {
  //     el.style.color = "blue";
  //   },
  // },
  methods: {
    // 这个对象中的属性 最终都会被挂在到当前实例上
    del(item) {
      this.todoList = this.todoList.filter((v) => v != item);
    },
    add() {
      this.todoList.push(this.todo);
      this.todo = "";
    },
    fn(e) {
      // 里边this都是当前实例
      console.log(666, e);
    },
    fn2() {
      console.log(777);
    },
    fn3() {
      console.log(arguments);
    },
  },
  created() {
    // this就是当前实例
    console.log(this);
  },
};

/* 
  钩子函数
  计算属性
  侦听器

  父子组件




*/
</script>
<style lang="less">
</style>